<template>
   <div class="comment-container">

       <h3>发表评论:</h3>

    <hr>

<!-- 文本输入框 -->
    <textarea placeholder="200百字就够了老妹" maxlength="200" v-model="msg"></textarea>

    <mt-button type="danger" size="large" @click="postcomment">发表评论</mt-button>

    <!-- api 获取 -->
    <!-- <div class="comment-list">
        <div class="comment-item" v-for="(item,i) in getcomment" :key="item.add_time">
            <div class="comment-title">
                {{ i+1 }}用户：匿名用户&nbsp;&nbsp;发表时间{{ item.user_name | dateFormat}}              
            </div>
            <div class="comment-body">
                    {{ item.content }}
                </div>
                
        </div>      
    </div> -->


    <div class="comment-list">
        <div class="comment-item">
            <div class="comment-title">
                第1楼&nbsp;用户：石昊&nbsp;&nbsp;发表时间:2020-3-11 14:42                
            </div>
            <div class="comment-body">
                    机器人在评论！！！
                </div>
                
        </div>      
    </div>


 <div class="comment-list">
        <div class="comment-item">
            <div class="comment-title">
                第2楼&nbsp;用户：韩立&nbsp;&nbsp;发表时间:2020-3-11 14:42                
            </div>
            <div class="comment-body">
                    机器人在评论！！！
                </div>
                
        </div>      
    </div>

     <div class="comment-list">
        <div class="comment-item">
            <div class="comment-title">
                第3楼&nbsp;用户：林逸&nbsp;&nbsp;发表时间:2020-3-11 14:42                
            </div>
            <div class="comment-body">
                    机器人在评论！！！
                </div>
                
        </div>      
    </div>
    <mt-button type="danger" size="large" plain  @click="loding">加载更多</mt-button>
   </div>
</template>

<script>
 export default{
     data(){
         return {
             //默认展示第一页数据
             pageidex:1,
             //所有的评论数据
             comments:[],
             msg:'' //获取评论内容
         }
     },
     created(){
         this.getcomment()
     },
     methods:{
         getcomment(){ //获取评论     
                            //此处的 this.id 获取的是 新闻 Newinfo  路由 页数的id
                            //根据 属性绑定 子组件 想父组件传递信息
            //  this.$http.get('/api/getcomments/"+ this.id +"?pageidex=this.pageidex').then(result => {
            //      if(result.body.status ===0){
            //          //这样第二页的评论会覆盖掉 第一页的评论
            //         //  this.comments = result.body.message

            //         //每当获取评论数据的时候 不要把老数据清空 而是应该以老数据 拼接 上新数据
            //         this.comments = this.comments.concat(result.body.message)
            //      }else{
            //          Toast('请求失败')
            //      }
            //  })
         },
         loding(){ //加载下一页的评论内容
         console.log("我是可以获取的 值是api 失效了")
            //评论页数+1
            this.pageidex++;
            //加1以后 重新调用
            this.getcomment();
         },
         postcomment(){ //发表评论
            
            //判断 如果评论框 内容为空 那么就 return 出去
            // if(this.msg.trim().length == 0){
            //     return Toast("评论内容不得为空")
            // }
            //     // this.$route.params.id 当前页面的后缀 id            content 是评论内容
            // this.$http.post('api/postcomment/' + this.$route.params.id,{ emulateJSON:true},{content:this.msg.trim()}).then({
            //     function (result) {
            //         if(result.body.status ===0){
            //             //1.拼接评论对象
            //             var sj = {user_name:'张伟',add_time: Date.now(),content:this.msg.trim()}
            //             //2. data的comments 存放了所有评论的数据 然后插入到第一条
            //             this.comments.unshift(sj)
            //             //完成之后 清空文本框的内容
            //             this.msg=''
            //         }else{
            //             Toast("评论上传失败")
            //         }
            //     }
            // })
         }
     }
 }
</script>


<style lang="scss" scoped>
    .comment-container{
        h3{
            font-size: 20px;
        }
        textarea{
            font-size: 15px;
            height: 100px;
            margin: 0;
        }

        .comment-list{
            margin: 10px 0;
            .comment-item{
                font-size: 13px;
                .comment-title{
                    list-style: 20px;
                    background-color: #ccc;
                }
                .comment-body{
                    line-height: 35px;
                    text-indent: 25px;
                }
            }
        }
    }
</style>
